<!-- 地图操作栏 -->
<template>
  <div class="column">
    <div class="column_left">
      <el-button @click="chartLeftHandler">
        <SvgIcon name="chart1" width="14px" height="14px" color="#333" />
      </el-button>
      <el-input v-model="WarehouseStore.searchCondition.keyword" @keyup.enter="enterQuery" placeholder="关键字搜索（名称或编号）">
        <template #suffix>
          <el-icon class="el-input__icon">
            <search />
          </el-icon>
        </template>
      </el-input>
      <div class="column_left_input">
        <ul class="list">
          <li class="item" v-for="(item, index) in state.searchList" :key="index">
            <div class="close" @click="handleCloseSearch(index)">
              <el-icon>
                <Close />
              </el-icon>
            </div>
            <el-input v-model="item.value" :placeholder="item.placeholder" v-on:keyup.enter="submitForm">
              <template #append>{{ item.lxmc }}</template>
            </el-input>
          </li>
        </ul>
      </div>
      <el-popover placement="bottom" ref="popoverRef" :width="100">
        <div class="popover">
          <el-collapse>
            <el-collapse-item v-for="(item, index) in WarehouseStore.treeList" :title="item.nameValue" :name="item.code"
              :key="index">
              <p v-for="(row, key) in item.children" :key="key" @click='treeHandler(item, row)'>{{ row.nameValue }}</p>
            </el-collapse-item>
          </el-collapse>
        </div>
        <template #reference>
          <el-button>
            <SvgIcon name="form_add" width="20px" height="20px" />
          </el-button>
        </template>
      </el-popover>

      <el-button @click="advancedSearchHandler">
        <SvgIcon name="senior_form" width="20px" height="20px" /> &nbsp;高级查询
      </el-button>
    </div>
    <div class="column_right">
      <div class="column_right_list">
        <div class="column_right_item" :class="{ 'acions': SettingStore.mouseToolStutas }" @click="drawPolygon">
          <SvgIcon name="kuangxuan" width="14px" height="14px"
            :color="`${SettingStore.mouseToolStutas ? '#FF0F40' : '#333'}`" />
          <span>框选</span>
        </div>
        <el-divider direction="vertical" />
        <div class="column_right_item" @click="doPrint">
          <SvgIcon name="dayin" width="14px" height="14px" color="#333" />
          <span>打印</span>
        </div>
        <el-divider direction="vertical" />
        <div class="column_right_item" @click="selectionDataListHandler">
          <SvgIcon name="chakan" width="14px" height="14px" color="#333" />
          <span>查看筛选数据</span>
        </div>
        <el-divider direction="vertical" />

        <el-popover placement="bottom" :width="100" trigger="click">
          <div>
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
              @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="SettingStore.layerList" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="(item, index) in layerList" :key="index" :label="item.type">{{
                item.name
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <template #reference>
            <div class="column_right_item">
              <SvgIcon name="tuceng" width="14px" height="14px" color="#333" />
              <span>图层控制</span>
            </div>
          </template>
        </el-popover>

      </div>
      <el-button @click="chartRightHandler">
        <SvgIcon name="chart1" width="14px" height="14px" color="#333" />
      </el-button>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import useSettingStore from '@/store/modules/setting'
const SettingStore = useSettingStore()
import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
const $emit = defineEmits(["drawPolygon", "enterQuery"]);
const checkAll = ref<boolean>()
const isIndeterminate = ref<boolean>()
const state = reactive<any>({
  searchList: [],
})
const layerList = reactive([
  { name: '变压器', type: 'transformer' },
  { name: '回路', type: 'loop' },
  { name: '灯杆', type: 'lamp_post' },
  { name: '灯具', type: 'lamp' },
  { name: '单灯控制器', type: 'single_lamp' },
  { name: '灯杆附属物', type: 'lamp_post_tailpiece' }
])
//  图层选择
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === layerList.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < layerList.length
  SettingStore.layerList = value
}
//  全选
const handleCheckAllChange = (val: boolean) => {
  SettingStore.layerList = val ? layerList.map(item => item.type) : []
  isIndeterminate.value = false
}
//  左边图表显示隐藏
const chartLeftHandler = () => {
  SettingStore.foldLeft = !SettingStore.foldLeft
}
//  右边图表显示隐藏
const chartRightHandler = () => {
  SettingStore.foldRight = !SettingStore.foldRight
}
//  查看筛选数据
const selectionDataListHandler = () => {
  SettingStore.selectionDataListShow = !SettingStore.selectionDataListShow
}
//  高级搜索
const advancedSearchHandler = () => {
  WarehouseStore.disabled = false
  SettingStore.advancedSearchShow = !SettingStore.advancedSearchShow
}
//  框选
const drawPolygon = () => {
  SettingStore.mouseToolStutas = !SettingStore.mouseToolStutas
  $emit('drawPolygon')
}
//  新增搜索条件
const popoverRef = ref()
const treeHandler = (item: any, row: any) => {
  const obj = {
    id: item.id,
    lx: item.name,
    lxmc: item.nameValue,
    sx: row.name,
    placeholder: row.nameValue,
    element: row.element,
    value: null
  }
  state.searchList.push(obj)
  popoverRef.value.hide()
}
//  删除自定义筛选条件
const handleCloseSearch = (index: number) => {
  state.searchList = state.searchList.filter((_item: any, key: number) => index !== key)
}
//  自定义搜索
const submitForm = () => {
  if (state.searchList.length === 0) {
    return
  }
  const params: any[] = []
  let obj: any = {}
  state.searchList.forEach((item: any) => {
    if (!obj[item.lx]) {
      obj[item.lx] = []
    }
    obj[item.lx].push({
      element: item.element,
      fieldName: item.sx,
      value: item.value,
      sign: 'equal',
      connect: 'and'
    })
    params.push({
      id: item.id,
      tableName: item.lx,
      returnFieldNames: [],
      filters: [{
        element: item.element,
        fieldName: item.sx,
        value: item.value,
        sign: 'equal',
        connect: 'and'
      }]
    })
  })
  const searchParam: any = []
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const item = obj[key];
      searchParam.push({
        tableName: key,
        returnFieldNames: [],
        filters: item
      })
    }
  }
  WarehouseStore.searchCondition = {};
  WarehouseStore.searchList = params
  WarehouseStore.countCustomPost({ searchParam })
  enterQuery()
}
//  地图搜索
const enterQuery = () => {
  $emit('enterQuery')
}
//  打印
const doPrint = () => {
  window.print()
}
onMounted(() => {
  isIndeterminate.value = SettingStore.layerList.length > 0
})
</script>

<style scoped lang="scss">
.el-checkbox {
  width: 100%;
}

.popover {
  max-height: 400px;
  overflow: auto;

  p {
    cursor: pointer;

    &:hover {
      color: #FF0F40;
    }
  }
}

.column {
  position: absolute;
  top: 62px;
  left: 10px;
  right: 10px;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .column_left {
    display: flex;

    button {
      margin-right: 6px;
      margin-left: 0;
    }

    .el-input {
      margin-right: 6px;
    }

    .column_left_input {
      .list {
        display: flex;

        .item {
          position: relative;
          width: 200px;
          margin-right: 10px;

          .close {
            position: absolute;
            top: -8px;
            right: -6px;
            z-index: 99;
            border-radius: 20px;
            background-color: #e4e4e4;
            cursor: pointer;

            i {
              color: #999;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .column_right {
    display: flex;
    justify-content: flex-end;

    .column_right_list {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 32px;
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid #E5E5E5;
      margin-right: 6px;
      padding: 0 12px;

      .column_right_item {
        display: flex;
        align-items: center;
        cursor: pointer;

        span {
          display: inline-block;
          margin-left: 6px;
          font-size: 14px;
          font-weight: 500;
        }
      }

      .acions {
        color: #FF0F40;
      }
    }
  }
}
</style>